<template>
    <div class="Index">
        <l-r-layout class="lrlayout" :right-width="400" :style="{height: containerHeight + 'px'}">
            <template #left>
                <StdList @typeChange="typeChange"/>
            </template>
            <template #right>
                <ElemList ref="elemList"/>
            </template>
        </l-r-layout>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted, inject} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import StdList from "./StdList/Index.vue";
import ElemList from "./ElemList/Index.vue";

// 框架容器区域高度
const containerHeight = computed(() => store.getters.containerHeight)

const props = defineProps({});
const emits = defineEmits();

// 路由
const router = useRouter();
// store
const store = useStore();


const elemList = ref()

// 类型选中
function typeChange(row) {
    elemList.value.setType(row)
}


onMounted(() => {
})
</script>

<style scoped lang="scss">
.Index {
    width: 100%;
    box-sizing: border-box;
    .lrlayout {
        width: 100%;
    }
}
</style>